<template>
  <div class="detail">
    <header>
      <h2>{{article.title}}</h2>
      <h3>
        <span>站长飞</span>
        <span>发表于 :</span>
        <span class="iconfont">&#xe623;</span>
        <span class="time">{{article.date|dTimer}}</span>
      </h3>
    </header>
    <section v-html="article.msg">
    </section>
    <img :src="article.url" alt="">
    <footer>
      <p>非特殊说明,本文版权归 站长飞 所有 , 转载请注明出处</p>
      <p>
        本文标题 :
        <small>z飞飞</small>
      </p>
    </footer>
    <h3>发表评论</h3>
    <Editor ref="content" />
    <button @click="sub">提交评论</button>
    <message :mId="article._id" :token="token" />
  </div>
</template>

<script>
import { mapState } from "vuex";
import Editor from "../../../editor/index";
import message from "./detailMsg";
export default {
  computed: {
    ...mapState({
      name: "name",
      token: "token",
      article: "article"
    })
  },
  components: {
    Editor,
    message
  },
  methods: {
    sub() {
      let data = {
        msg: this.$refs.content.msg,
        mId: this.article._id,
        name: this.name
      };
      if (data.msg && this.name) {
        this.$axios
          .post("/detailmsg", data)
          .then(() => {});
      } else {
        this.$message({
          message: "请确保评论信息或者是否已登录?",
          type: "warning"
        });
      }
      setTimeout(() => {
        window.location.reload();
      }, 0);
    }
  }
};
</script>

<style lang="less" >
.detail {
  box-sizing: border-box;
  padding: 20px 40px;
  width: 100%;
  background: white;
  > h3 {
    margin-top: 30px;
    border-top: 1px solid #ccc;
    line-height: 100px;
    text-align: center;
    font-size: 25px;
    color: #6bc30d;
    font-weight: 600;
  }
  > button {
    display: block;
  }
  >button {
    height: 38px;
    margin: 38px 0;
    padding: 0 18px;
    background-color: #009688;
    color: #fff;
    white-space: nowrap;
    text-align: center;
    font-size: 14px;
    border: none;
    border-radius: 2px;
    cursor: pointer;
    transition: 0.5s;
  }
  >header {
    width: 100%;
    height: 100px;
    text-align: center;
    margin: 0 auto;
    border-bottom: 1px solid #ccc;
    h2 {
      font: 23px/1.5 "Helvetica neue",Helvetica,Tahoma,"lantinghei sc","Microsoft Yahei",sans-serif;
      color: #515250;
      line-height: 70px;
      font-weight: bold;
    }
    h3 {
      color: #777;
      span {
        margin-right: 19px;
        font-size: 15px;
        &.time {
          font-size: 14px;
        }
      }
    }
  }
  >section {
    margin: 30px 0;
    line-height:40px;
    h1,h2{
      font: 16px/1.5 "Helvetica neue",Helvetica,Tahoma,"lantinghei sc","Microsoft Yahei",sans-serif;
      color: #515250;
      margin-bottom:30px;
      padding-left:20px;
      border-left:8px solid #6bc30d;
      background-color: #f8f9f7;
    }
    >pre{
      font: 15px/1.5 "Helvetica neue",Helvetica,Tahoma,"lantinghei sc","Microsoft Yahei",sans-serif;
      color: #515250;
      text-indent: 28px;
      margin-bottom:20px;
    }
    p{
      background-color: #f5f5f5;
      font-family: Courier New !important;
      border: 1px solid #ccc;
      padding: 5px;
      overflow: auto;
      color: #000;
      margin-left:50px;
      margin-top:30px;
      font: 14px/1.5 "Helvetica neue",Helvetica,Tahoma,"lantinghei sc","Microsoft Yahei",sans-serif;
      color: #515250;
      padding-left:35px;
    }
    >ul,ol{
      margin-left:50px ;
      background-color: #f5f5f5;
      font-family: Courier New !important;
      border: 1px solid #ccc;
      padding: 5px;
      overflow: auto;
      color: #000;
      li{
          font: 14px/1.5 "Helvetica neue",Helvetica,Tahoma,"lantinghei sc","Microsoft Yahei",sans-serif;
          color: #515250;
          line-height: 35px;
         list-style-type:square;
         margin-left:40px;
      }
    }
  }
  img{
    margin-left:60px;
  }
  >footer {
    box-sizing: border-box;
    padding: 20px;
    background: rgb(248, 249, 247);
    margin-top:30px;
    p {
      line-height: 30px;
      color: #565755;
      font-size: 13px;
      small {
        color: #3e8bc7;
        margin-left: 15px;
        &:hover {
          color: #6bc30d;
          cursor: pointer;
        }
      }
    }
  }
}
</style>